<template>
  <div class="emoji-box" v-show="show">
    <div class="modal-bg" v-if="show" @click.prevent="handlehide()"></div>
    <div class="emoji-wraper">
      <div class="img-wrap">
        <ul ref="tabbar-ul">
          <li
            v-for="item in showAttr('num')"
            :key="item"
            @click="handleClick(item)"
          >
            <img :src="imgSrc(item)" alt="" />
          </li>
        </ul>
      </div>
      <div class="tabbar">
        <ul>
          <li
            :class="{ active: idx == item.id }"
            v-for="item in emojiType"
            :key="item.id"
            @click="handleChange(item)"
          >
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      idx: 0,
      emojiType: [
        { id: 0, title: 'QQ表情', name: 'qq/', type: '.gif', num: 91 },
        { id: 1, title: 'EMOJI', name: 'emoji/', type: '.png', num: 84 },
        { id: 2, title: '贴吧表情', name: 'tieba/', type: '.jpg', num: 50 },
      ],
    }
  },
  computed: {
    showAttr() {
      return (attr) => {
        return this.emojiType[this.idx][attr]
      }
    },
    imgSrc() {
      return (item) => {
        let { name, type } = this.emojiType[this.idx]
        return require('@/components/emoji/img/' + name + item + type)
      }
    },
  },
  mounted() {
    this.$bus.$on('showEmoji', () => {
      this.init()
    })
  },
  beforeDestroy() {
    this.$bus.$off('showEmoji')
  },
  methods: {
    init() {
      this.idx = 0
      this.$nextTick(() => {
        this.$refs['tabbar-ul'].scrollIntoView(true)
      })
      this.show = !this.show
    },
    handleClick(item) {
      this.$emit('emit', this.imgSrc(item))
      this.show = !this.show
    },
    handleChange(item) {
      this.idx = item.id
    },
    handlehide() {
      this.show = false
    },
  },
}
</script>
<style scoped lang="scss">
.modal-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.emoji-wraper {
  position: relative;
  width: 100%;
  height: 100%;
}
.emoji-box {
  position: relative;
  padding: 5px;
  width: 470px;
  height: 277px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #e3e3e3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.176);
  z-index: 10;
  .img-wrap {
    height: 235px;
    overflow: auto;
    ul {
      overflow: hidden;
      border-top: 1px solid #e3e3e3;
      border-left: 1px solid #e3e3e3;
      li {
        float: left;
        width: 54px;
        height: 54px;
        border: 1px solid #e3e3e3;
        margin-top: -1px;
        margin-left: -1px;
        cursor: pointer;
        text-align: center;
        line-height: 54px;
        transition: all 0.3s;
        &:hover {
          background: #f7f7f7;
        }
        img {
          width: 30px;
          height: 30px;
          vertical-align: middle;
        }
      }
    }
  }
  .tabbar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 22px;
    padding: 5px 0;
    width: 100%;
    border-top: 1px solid #e3e3e3;
    background: #f7f7f7;
    ul {
      li {
        float: left;
        height: 22px;
        line-height: 22px;
        margin: 0 5px;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        padding: 0 10px;
        border-radius: 4px;
        background: #999;
        &.active {
          background: steelblue;
        }
      }
    }
  }
}
</style>